<script lang="ts">
export default {
  name: "RepositoryProductDetail"
}
</script>

<!--
 * @Description: 设备编辑对话框
 * @version:
 * @Author:
 * @Date: 2022-10-24 09:10:28
 * @LastEditors:
 * @LastEditTime: 2022-10-24 09:10:28
-->
<template>
  <el-descriptions
    ref="dataFormRef"
    :column="1"
    :model="dataState.formData"
    border
  >
    <el-descriptions-item label="产品型号"> {{ dataState.formData.deviceType }}</el-descriptions-item>

    <el-descriptions-item label="生产厂商"> {{ dataState.formData.manufacturer }}</el-descriptions-item>

    <el-descriptions-item label="产品图片">
      <img :src="dataState.formData.imageUrl" alt="" style="height: 240px; width: 180px;"/>
    </el-descriptions-item>

    <el-descriptions-item label="产品标签"> {{ dataState.formData.tags }}</el-descriptions-item>

    <el-descriptions-item label="产品描述">
      <el-input v-model="dataState.formData.description" :autosize="{ minRows: 3, maxRows: 100 }" type="textarea"/>
    </el-descriptions-item>

    <el-descriptions-item label="产品链接">
      <a :href="dataState.formData.url" class="buttonText" target="_blank">{{ dataState.formData.url }}</a>
    </el-descriptions-item>

    <el-descriptions-item label="更新时间"> {{ dataState.formData.updateTimeText }}</el-descriptions-item>

    <el-descriptions-item label="重启服务">
      <el-button :icon="RefreshLeft" circle plain type="danger" @click.stop="handleRestart()"/>
    </el-descriptions-item>


  </el-descriptions>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {RefreshLeft} from '@element-plus/icons-vue';

import {ElForm} from "element-plus";


import {RepoProductEntity} from "@/api/device/product/types";

const props = defineProps(['visible']);
const emit = defineEmits(['create', 'update', 'cancel', 'restart']); //注意：这个是父组件<dict-type-edit>标签上的@close
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initEditData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '详细信息',
  // 表单数据
  formData: {} as RepoProductEntity,

  productId: '',
});

/**
 * 取消
 */
function handleCancel() {
  emit('cancel', "子组件传给父组件的值");
}

function initEditData(entity: RepoProductEntity) {
  dataState.formData = entity;
}

function handleRestart() {
  emit('restart');
}

function getUuidFromHref() {
  let tag = "/repo-comp/cloud/repo-comp-product-detail?uuid=";
  let start = location.href.indexOf(tag);
  if (start > 0) {
    return location.href.substring(start + tag.length);
  }

  return '';
}

onMounted(() => {
  dataState.productId = getUuidFromHref();
});

</script>
